﻿@model StatisticsPackagesViewModel
@using System.Globalization
@{
    ViewBag.Title = "Statistics";
    ViewBag.Tab = "Statistics";
}

@functions
{
    private static string Format(double input)
    {
        return input.ToString(CultureInfo.InvariantCulture);
    }
}

<section role="main" class="container main-container page-statistics-overview">
    <h1>Statistics</h1>

    <span class="ms-fontSize-l">
        @Html.Partial("_LastUpdated", Model)
    </span>

    <div class="row">
        @if (Model.IsDownloadPackageAvailable)
        {
            <div class="col-md-6 col-xs-12 table-wrapper">
                <h2 class="stats-title-text">Package Downloads</h2>

                <table class="table col-xs-12 borderless" aria-label="Package Downloads">
                    <thead>
                        <tr>
                            <th class="text-left">Name</th>
                            <th class="text-right">Downloads</th>
                        </tr>
                    </thead>
                    <tbody>
                        @{
                            var index = 0;
                            foreach (var item in Model.DownloadPackagesSummary)
                            {
                                index++;

                                <tr>
                                    <td class="text-left"><a href="@Url.Package(item.PackageId)" title="@item.PackageId">@item.PackageId</a></td>
                                    <td class="text-right"><a href="@Url.StatisticsPackageDownloadByVersion(item.PackageId)">@Model.DisplayDownloads(item.Downloads)</a></td>
                                </tr>
                            }
                        }
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="2">
                                <a href="@Url.StatisticsAllPackageDownloads()">More...<span class="sr-only">View more package download statistics</span></a>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        }
        @if (Model.IsDownloadPackageVersionsAvailable)
        {
            <div class="col-md-6 col-xs-12 table-wrapper">
                <h2 class="stats-title-text">Version Downloads</h2>

                <table class="table col-xs-12 borderless" aria-label="Version Downloads">
                    <thead>
                        <tr>
                            <th class="text-left">Name</th>
                            <th class="text-center">Version</th>
                            <th class="text-right">Downloads</th>
                        </tr>
                    </thead>
                    <tbody>
                        @{
                            var index = 0;
                            foreach (var item in Model.DownloadPackageVersionsSummary)
                            {
                                index++;

                                <tr>
                                    <td class="text-left"><a href="@Url.Package(item.PackageId)" title="@item.PackageId">@item.PackageId</a></td>
                                    <td class="text-center"><a href="@Url.Package(item.PackageId, item.PackageVersion)">@item.PackageVersion</a></td>
                                    <td class="text-right"><a href="@Url.StatisticsPackageDownloadsDetail(item.PackageId, item.PackageVersion)">@Model.DisplayDownloads(item.Downloads)</a></td>
                                </tr>
                            }
                        }
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3">
                                <a href="@Url.StatisticsAllPackageVersionDownloads()">More...<span class="sr-only">View more package version download statistics</span></a>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
          }
    </div>

    <div class="row">
        @if (Model.IsNuGetClientVersionAvailable)
            {
            <div class="col-md-6 col-xs-12">
                <h2 class="stats-title-text">NuGet Client Usage (Last 6 Weeks)</h2>
                <div class="col-xs-12 chart table-wrapper">
                    @{ 

                        var limitCount = 15;
                        var minDL = 1000;
                        var showVersions = Model.NuGetClientVersion.Where(e => e.Downloads > minDL);
                        if (showVersions.Count() > limitCount)
                        {
                            showVersions = showVersions.Skip(Math.Max(0, showVersions.Count() - limitCount));
                        }
                    }
                    @if (showVersions != null && showVersions.Count() > 0)
                    {
                        <svg class="chart" id="bar-chart-client-usage">
                            @{

                                var chartFullWidthInPercent = 90.0;
                                var chartFullHeightInPercent = 90.0;
                                var widthOffsetPercent = 100.0 - chartFullWidthInPercent;
                                var index = 0;
                                var gapPercent = .1;
                                var max = showVersions.Max(e => e.Downloads) * 1.0;
                                var numYAxisLabels = 10.0;
                                var fraction = chartFullWidthInPercent / showVersions.Count();
                                foreach (var item in showVersions)
                                {
                                    <rect class="graph-bar" id="graph-bar-@(item.Version)" x="@Format(widthOffsetPercent + index * fraction)%" y="@Format(chartFullHeightInPercent-item.Downloads/max*chartFullHeightInPercent)%" width="@Format(fraction * (1.0 - gapPercent))%" height="@Format(item.Downloads/max*chartFullHeightInPercent)%">
                                        <title>@(item.Downloads) downloads</title>
                                    </rect>

                                        <svg x="@Format(widthOffsetPercent + index * fraction + fraction/2.0 - 2.5)%" y="@Format(chartFullHeightInPercent + 1)%">
                                            <g transform="rotate(-45)">
                                                <text y="1.5em" x="-0.9em" class="graph-x-axis-text"> @(item.Version)</text>
                                            </g>
                                        </svg>
                                    index++;
                                }

                                for (var i = 0; i < numYAxisLabels; i++)
                                {
                                    @:<text class="graph-y-axis-text" x="0" y="@Format(i / numYAxisLabels * chartFullHeightInPercent)%" dy="1em" text-overflow="clip">@Model.DisplayShortNumber((long)Math.Floor(max * (numYAxisLabels - i) / numYAxisLabels))</text>
                                }
                            }
                        </svg>
                    }
                </div>
                <table class="table col-xs-12 borderless" aria-label="NuGet Client Downloads">
                    <thead>
                        <tr>
                            <th class="text-left">NuGet Client Version</th>
                            <th class="text-right">Downloads</th>
                        </tr>
                    </thead>
                    <tbody>
                        @{
                            foreach (var item in Model.NuGetClientVersion.Reverse())
                            {
                                <tr tabindex="0" aria-label="Version @(item.Version) with @(item.Downloads) Downloads">
                                    <td class="text-left">@item.Version</td>
                                    <td class="text-right">@Model.DisplayDownloads(item.Downloads)</td>
                                </tr>
                            }
                        }
                    </tbody>
                </table>
            </div>
                            }
        @if (Model.IsLast6WeeksAvailable)
            {
            <div class="col-md-6 col-xs-12">
                <h2 class="stats-title-text">Downloaded Packages Per Week (Last 6 Weeks)</h2>
                <div class="col-xs-12 chart table-wrapper">
                    @if (Model.Last6Weeks != null)
                    {
                        <svg class="chart" id="line-chart-sixweeks-downloads">
                            @{
                                var chartFullWidthInPercent = 90.0;
                                var chartFullHeightInPercent = 75.0;
                                var topOffset = 5;
                                var widthOffsetPercent = 100.0 - chartFullWidthInPercent;
                                var index = 0;
                                var prevCenterX = -1.0;
                                var prevCenterY = -1.0;
                                var centerX = 0.0;
                                var centerY = 0.0;
                                var fraction = chartFullWidthInPercent / Model.Last6Weeks.Count();
                                var max = Model.Last6Weeks.Max(e => e.Downloads) * 1.0;
                                var numYAxisLabels = 7.0;
                                StatisticsWeeklyUsageItem prevItem = null;
                                foreach (var item in Model.Last6Weeks)
                                {
                                    centerX = widthOffsetPercent + index * fraction + fraction / 3;
                                    centerY = topOffset + chartFullHeightInPercent - item.Downloads / max * chartFullHeightInPercent;
                                    if (prevCenterY >= 0 && prevCenterX >= 0 && prevItem != null)
                                    {
                                        <line class="graph-line" x1="@Format(prevCenterX)%" y1="@Format(prevCenterY)%" x2="@Format(centerX)%" y2="@Format(centerY)%" />
                                            <circle class="graph-dot" id="graph-dot-@(prevItem.Year)-@(prevItem.WeekOfYear)" cx="@Format(prevCenterX)%" cy="@Format(prevCenterY)%" r="5px">
                                                <title>@(prevItem.Downloads) downloads</title>
                                            </circle>
                                    }

                                    <circle class="graph-dot" id="graph-dot-@(item.Year)-@(item.WeekOfYear)" cx="@Format(centerX)%" cy="@Format(centerY)%" r="5px">
                                        <title>@(item.Downloads) downloads</title>
                                    </circle>

                                    <svg x="@Format(widthOffsetPercent + index * fraction + fraction/2.0 - 5)%" y="@Format(topOffset + chartFullHeightInPercent + 2)%">
                                        <g transform="rotate(-45)">
                                            <text y="2.6em" x="-2.0em" class="graph-x-axis-date">@Model.DisplayWeek(item.Year, item.WeekOfYear, StatisticsPackagesViewModel.WeekFormats.StartOnly)-</text>
                                            <text y="2.6em" x="-2.0em" class="graph-x-axis-date" dy="1em">@Model.DisplayWeek(item.Year, item.WeekOfYear, StatisticsPackagesViewModel.WeekFormats.EndOnly)</text>
                                        </g>
                                    </svg>

                                    prevCenterX = widthOffsetPercent + index * fraction + fraction / 3;
                                    prevCenterY = topOffset + chartFullHeightInPercent - item.Downloads / max * chartFullHeightInPercent;
                                    prevItem = item;
                                    index++;
                                }

                                for (var i = 0; i < numYAxisLabels; i++)
                                {
                                    @:<text class="graph-y-axis-text" x="0" y="@Format(topOffset + i / numYAxisLabels * chartFullHeightInPercent)%" dy="1em" text-overflow="clip">@Model.DisplayShortNumber((long)Math.Floor(max * (numYAxisLabels - i) / numYAxisLabels))</text>
                                }

                            }
                        </svg>
                      }
                </div>
                <table class="table col-xs-12 borderless" aria-label="Weekly Downloads">
                    <thead>
                        <tr>
                            <th class="text-left">Week</th>
                            <th class="text-right">Downloads</th>
                        </tr>
                    </thead>
                    <tbody>
                        @{
                            foreach (var item in Model.Last6Weeks)
                            {
                                <tr tabindex="0" aria-label="Week of @Model.DisplayWeek(item.Year, item.WeekOfYear, StatisticsPackagesViewModel.WeekFormats.StartOnly), @(item.Downloads) Downloads">
                                    <td class="text-left" title="@Model.DisplayWeek(item.Year, item.WeekOfYear)">@Model.DisplayWeek(item.Year, item.WeekOfYear)</td>
                                    <td class="text-right">@Model.DisplayDownloads(item.Downloads)</td>
                                </tr>
                            }
                        }
                    </tbody>
                </table>
            </div>
         }
    </div>
</section>